<template>
  <div>
    <!-- 导航栏 -->
    <van-nav-bar
      title="功能设置"
      left-arrow
      :border="false"
      fixed
      @click-left="$utils.back($route.path);"
    />
    <div class="has-top"></div>

    <!-- 功能开关 -->
    <van-cell-group title="功能开关">
      <van-cell title="功能1">
        <van-switch slot="right-icon" v-model="checked_1" active-color="#f44" size="0.6rem" />
      </van-cell>
      <van-cell title="功能2" label="功能描述">
        <van-switch slot="right-icon" v-model="checked_2" active-color="#f44" size="0.6rem" />
      </van-cell>
      <van-cell title="功能3" label="功能描述">
        <van-switch slot="right-icon" v-model="checked_3" active-color="#f44" size="0.6rem" />
      </van-cell>
    </van-cell-group>

    <!-- 参数设置 -->
    <van-cell-group title="参数设置">
      <van-field label="参数1">
        <van-checkbox-group class="flex flex-wrap" slot="input" v-model="result">
          <van-checkbox
            v-for="(item, index) in tagList"
            :key="index"
            :name="item.id"
            shape="square"
            checked-color="#f44"
          >{{ item.label }}</van-checkbox>
        </van-checkbox-group>
      </van-field>
    </van-cell-group>
  </div>
</template>

<script>
export default {
  data() {
    return {
      checked_1: true,
      checked_2: true,
      checked_3: true,
      tagList: [
        {
          label: '参数选项1',
          id: 1
        },
        {
          label: '参数选项2',
          id: 2
        },
        {
          label: '参数选项3',
          id: 3
        },
        {
          label: '参数选项4',
          id: 4
        },
        {
          label: '参数选项5',
          id: 5
        },
        {
          label: '参数选项6',
          id: 6
        }
      ],
      result: [1, 2]
    }
  },
  methods: {}
}
</script>

<style lang="scss" scoped>
.van-checkbox {
  margin: 0 10px 10px 0;
}
</style>
